{% extends "frame/tabpages.html" %}
{% load static %}

{% block head %}
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
{% endblock %}

{% block content %}
<body>
    <div class="layui-fluid">
        <div class="layui-row">
            <form class="layui-form" id="id_addOrderForm">
        <div class="layui-col-xs5">
                <div class="layui-form-item">
                    <label for="id_orderid" class="layui-form-label">
                        <span class="x-red">*</span>订单编号</label>
                    <div class="layui-input-inline">
                        <input type="text" id="id_orderid" name="orderid" lay-verify="required" autocomplete="off" class="layui-input" value="DD001"></div>
                </div>
                <div class="layui-form-item">
                    <label for="id_customer" class="layui-form-label">
                        <span class="x-red">*</span>客户名称</label>
                    <div class="layui-input-inline">
                        <select name="customer" lay-verify="required" lay-reqtext="客户不能为空!">
                            <option value="">请选择<option>
                            {% for customer in customers %}
                            <option value="{{customer.id}}">{{customer.name}}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="id_deposit" class="layui-form-label">
                        <span class="x-red">*</span>压金</label>
                    <div class="layui-input-inline">
                        <input type="text" id="id_deposit" name="deposit" placeholder="单位:元" required="" lay-verify="number" autocomplete="off" class="layui-input" value="1000"></div>
                </div>
                <div class="layui-form-item">
                    <label for="id_price" class="layui-form-label">
                        <span class="x-red">*</span>费用/日</label>
                    <div class="layui-input-inline">
                        <input type="text" id="id_price" name="price" required="" lay-verify="number" autocomplete="off" class="layui-input" value="10"></div>
                </div>
                <div class="layui-form-item">
                    <label for="id_orderdate" class="layui-form-label">
                        <span class="x-red">*</span>下单日期</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" id="id_orderdate" name="orderdate" lay-verify="date" value="2021-08-27"></div>
                </div>
        </div>
        <div class="layui-col-xs7">
                <div class="layui-form-item">
                    <label for="id_orderdate" class="layui-form-label">
                        <span class="x-red">*</span>订单内容</label>
                    <div class="layui-input-inline">
                        <div style="background: white; width: 300px; height: 300px; overflow-x: hidden; overflow-y: auto;">
                        <ul id="productTree"  class="ztree"></ul>
                        </div>
                    </div>
                </div>
        </div>
        <div class="layui-col-xs12">
                <div class="layui-form-item layui-form-text">
                    <label for="id_comment" class="layui-form-label">描述</label>
                    <div class="layui-input-block">
                        <textarea placeholder="请输入内容" id="id_comment" name="comment" class="layui-textarea">test</textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"></label>
                    <button class="layui-btn" lay-filter="add" lay-submit="">增加</button>
                    <button class="layui-btn" lay-filter="continue" lay-submit="">增加后继续</button>
                </div>
        </div>
            </form>
        </div>
    </div>
</body>
{% endblock %}

{% block jsscript %}
<link rel="stylesheet" href="{% static 'common/ztree/css/metroStyle/metroStyle.css' %}">
<script type="text/javascript" src="{% static 'common/ztree/js/jquery.ztree.core.js' %}"></script>
<script type="text/javascript" src="{% static 'common/ztree/js/jquery.ztree.excheck.js' %}"></script>
<script type="text/javascript" src="{% static 'common/ztree/js/jquery.ztree.exedit.js' %}"></script>
<script>

    $("#id_orderid").blur(function(){
        var value = this.value;
        var node = this;
        $.post("{% url 'order:show_orderVerifyKeyExist' %}",{name:value},function (data) {
            if(data.code){
                layer.msg('[ '+value+' ]已经存在!',{icon: 5});
                node.focus();
            }
        });
    })

    layui.use(['laydate', 'form', 'layer'],
    function() {
        $ = layui.jquery;
        var form = layui.form,
        laydate = layui.laydate,
        layer = layui.layer;
        
        laydate.render({
            elem: '#id_orderdate'
        });
        
        //监听提交
        form.on('submit(add)',
        function(data) {
            dataField = data.field
            for (key in dataField) 
            {
                if (dataField[key] === "")
                {
                    delete dataField[key]
                }
            }

            $.ajax({
                type:'post',
                url:"{% url 'order:show_orderAdd' %}",
                data:dataField,
                success:function(res){
                    if (res.code == 0)
                    {
                       // layer.alert("添加成功", {icon: 6},function() {
                            xadmin.close();//关闭当前frame
                            xadmin.father_reload();// 可以对父窗口进行刷新 
                        //});
                        layer.msg("添加失败.");
                    }
                },
                error:function(res)
                {
                    layer.msg("添加失败.");
                }
            });
                       
            return false;
        });

        form.on('submit(continue)',
        function(data) {
            $.ajax({
                type:'post',
                url:"{% url 'order:show_orderAdd' %}",
                data:data.field,
                success:function(res){
                    if (res.code == 0)
                    {
                        layer.msg("添加成功,继续添加下一个.");
                        $("#id_addOrderForm")[0].reset();
                    }
                },
                error:function(res)
                {
                    layer.msg("添加失败.");
                }
            });
                       
            return false;
        });
    });

	IDMark_A = "_a";
	
	var setting = {
		view: {
			addDiyDom: addDiyDom,
			showIcon: showIconForTree
		}
	};

	function addDiyDom(treeId, treeNode) {
		var aObj = $("#" + treeNode.tId + IDMark_A);
		if (treeNode.parentid) {
			var editStr = 
                "<input type='text' style='text-align:right;margin:0 3px 0 1px;width:50px;height:13px' "+
                " name='productname_" + treeNode.id +"'" + 
                " placeholder='数量' id='productid_" + treeNode.id +"' >[件]"
			aObj.after(editStr);
		}
	}
	
	function showIconForTree(treeId, treeNode) {
		//return !treeNode;
		return !treeNode.isParent;
	};
	
	$(document).ready(function(){
		$.fn.zTree.init($("#productTree"), setting, {{ productTreeData | safe }});
	});
</script>
{% endblock %}
